<template>
	<view class="microShareholder-container">
		<view class="sticky-box" v-if="overviewInfo">
			<view class="top-overview flexWrapNo">
				<view class="item">
					<text class="value">{{overviewInfo.totalStock||0}}</text>
					<text class="label">总股数</text>
				</view>
				<view class="item">
					<text class="value">{{overviewInfo.issueStock||0}}</text>
					<text class="label">发行股数</text>
				</view>
				<view class="item">
					<text class="value">{{overviewInfo.surplusStock||0}}</text>
					<text class="label">剩余</text>
				</view>
				<view class="item">
					<text class="value">{{overviewInfo.soldStock||0}}</text>
					<text class="label">已售</text>
				</view>
				<view class="look" @tap="goPage('/micro-shareholder/protocol')">查看协议</view>
			</view>
			
			<view class="search-box flexWrapNo">
				<view class="search-input flexWrapNo">
					<input type="tel" placeholder="请输入手机号码" maxlength="11" placeholder-class="placeholderClass" v-model="mobile"/>
				</view>
				<view class="search-btn flexWrapNo" @tap="freshList()">查询</view>
			</view>
		</view>
		
		<view class="shareholder-list">
			<view class="shareholder-item flexWarpColumn" v-for="(item,index) in shareholderList" :key="index">
				<view class="info-item"> 
					<text>手机号码</text>{{item.mobile||'-'}}
				</view>
				<view class="info-item">
					<text>银行卡</text>{{item.bankInfo||'-'}}
				</view>
				<view class="line"></view>
				<view class="flexWrap">
					<view class="info-item">
						<text>购买时间</text>{{item.purchaseTime||'-'}}
					</view>
					<view class="status blue"  v-if="item.isEffective==1">有效</view>
					<view class="status white" v-if="item.isEffective==0">已到期</view>
				</view>
				<view class="flexWrap">
					<view class="info-item">
						<text>开始分红日期</text>{{item.dividendDate||'-'}}
					</view>
					<view class="info-item" v-if="item.cooperationPeriod==1">
						<text>分红截止日期</text>长期有效
					</view>
					<view class="info-item" v-else>
						<text>分红截止日期</text>{{item.dividendBy||'-'}}
					</view>
				</view>
				<view class="detail flexWrapNo">
					<view class="detail-item flexWarpCenterColumn">
						<text class="value">{{item.shares||0}}</text>
						<text class="label">购买股数</text>
					</view>
					<view class="detail-item flexWarpCenterColumn">
						<text class="value">{{item.amount||0}}</text>
						<text class="label">购买金额</text>
					</view>
					<view class="detail-item flexWarpCenterColumn">
						<text class="value special" @tap="goPage(`/micro-shareholder/shareBonusRecord?mobile=${item.mobile}&type=1`)">{{item.prepareDivide||0}}</text>
						<text class="label">待发放分红</text>
					</view>
					<view class="detail-item flexWarpCenterColumn">
						<text class="value special" @tap="goPage(`/micro-shareholder/shareBonusRecord?mobile=${item.mobile}`)">{{item.cumulativeDivide||0}}</text>
						<text class="label">累计分红</text>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more v-if="showLoadStatus" :status="status" :size="14" :content-text="contentText" />
		<view class="quesheng" v-if="showEmpty">
			<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
		</view>
		
		<!--操作指引悬浮按钮 -->
		<guideline :path="'micro-shareholder/microShareholder'"></guideline>
	</view>
</template>

<script>
	import utils from '@/common/lib/util.js'
	export default{
		data(){
			return{
				overviewInfo:null,
				mobile:'',
				shareholderList:[],
				
				page: 1,
				size: 10,
				showEmpty: true,
				showLoadStatus: false,
				more: true,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中...',
					contentnomore: '已经到底了~~'
				},
				status: 'loading',			
			}
		},
		onLoad() {
			this.getShareholderList()
		},
		
		onPullDownRefresh() {
			this.freshList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		
		onReachBottom() {
			if (this.more) {
				this.getShareholderList()
			}
		},
		methods:{
			freshList:utils.debounce(function(){
				this.page = 1
				this.more = true
				this.status = 'loading'
				this.shareholderList = []
				this.getShareholderList();
			},600),
			
			//  获取店铺股东列表
			getShareholderList(){
				this.$request.post(this.$api.shareholderList, {
					storeId:uni.getStorageSync('store_id'),
					mobile:this.mobile,
					pageNum:this.page++,  //当前页数
					pageSize:this.size,  //当前条数
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200&&res.data){
						let {
							data = {}
						} = res;
						this.overviewInfo=data.info
						let newArray = data.pageInfo.list
						if (newArray.length == 0 && this.page == 2) {
							this.showEmpty = true
							this.showLoadStatus = false
							this.more = false // 不能再次请求了
							return false;
						} else {
							this.showLoadStatus = true
							this.more = true
							this.showEmpty = false
							this.status = 'loading'
						}
						if (newArray.length < this.size) { // 说明没有更多数据
							this.status = 'noMore'
							this.more = false
							this.showEmpty = false
						}
						this.shareholderList = this.shareholderList.concat(newArray);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.microShareholder-container{
		padding: 0 28rpx;
		padding-bottom: 80rpx;
	}
	.sticky-box{
		background: #040336;
		padding: 28rpx 0 30rpx 0;
		position: sticky;
		top:0;
	}
	.top-overview{
		padding: 20rpx 40rpx;
		border: 1rpx solid rgba(255,255,255,0.6);
		border-radius: 8rpx;
		justify-content: space-between;
		gap: 40rpx;
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			.value{
				color:rgba(255,255,255,1);
				font-size: 30rpx;
				font-weight: bold;
			}
			.label{
				margin-top: 4rpx;
				color:rgba(255,255,255,0.6);
				font-size: 26rpx;
			}
		}
		.look{
			color:#26BCFD ;
			font-size: 30rpx;
		}
	}
	
	.search-box{
		margin-top: 30rpx;
		gap: 20rpx;
		/deep/.search-input{
			flex:1;
			height:60rpx;
			border-radius:8rpx;
			border: 2rpx solid rgba(255,255,255,0.5);
			padding: 0 20rpx;
			input{
				font-size: 28rpx;
				color: #FFF;
				width: 100%;
			}
			.placeholderClass{
				font-size: 28rpx;
				color: rgba(255,255,255,0.5);
			}
		}
		.search-btn{
			padding: 0 30rpx;
			height: 60rpx;
			border-radius: 8rpx;
			color: #fff;
			font-size: 28rpx;
			background: rgb(31, 124, 247);
		}
	}
	
	.shareholder-list{
		// margin-top: 30rpx;
		.shareholder-item{
			padding: 20rpx;
			border: 2rpx solid rgba(255,255,255,0.3);
			border-radius:8rpx;
			margin-bottom: 20rpx;
			.info-item{
				font-size: 28rpx;
				color: rgba(255,255,255,1);
				display: flex;
				margin-bottom: 14rpx;
				text{
					min-width: 100rpx;
					color: rgba(255,255,255,0.7);
					margin-right: 20rpx;
				}
			}
			.status{
				font-size: 24rpx;
				margin-bottom: 14rpx;
			}
			.blue{
				color: #26BCFD;
			}
			.white{
				color: rgba(255,255,255,0.5);
			}
			.line{
				width: 100%;
				height: 1rpx;
				background: rgba(255,255,255,0.3);
				margin: 10rpx 0 20rpx 0;
			}
			.detail{
				margin-top: 10rpx;
				gap: 40rpx;
				justify-content: center;
				.detail-item{
					.value{
						color:rgba(255,255,255,1);
						font-size: 30rpx;
						font-weight: bold;
					}
					.label{
						margin-top: 4rpx;
						color:rgba(255,255,255,0.6);
						font-size: 26rpx;
					}
					.special{
						color:#26BCFD;
					}
				}
			}
		}
	}
	
	.quesheng{
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		image{
			width: 476upx;
			height: 280upx;
		}
	}
</style>